<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D照片墙</title>
    <!-- <link rel="stylesheet" href="./css/style.css"> -->
    <script>
    window.onload=function(){
        var oImg = document.getElementsByTagName("img");
        var oWrap = document.getElementsByClassName('wrap')[0];
        // console.log(oImg);
        var Deg = 360 / oImg.length;
        Array.prototype.forEach.call(oImg,function(el,index) {
            console.log(el);
            el.style.transform = "rotateY(" + Deg*index + "deg) translateZ(350px)";
            el.style.zIndex = -index;
            el.style.transition = "all " + index*0.3 + "s";
        })

        // 点、拖、送
        // nowX, nowY:现在的鼠标坐标
        // lastX, lastY:上一次鼠标坐标
        // minusX, minusY:距离差
        // roX, roY:总旋转度数
        var nowX = 0,nowY = 0, lastX = 0, lastY = 0, minusX = 0, minusY = 0, roX = -10, roY = 0;
        document.onmousedown = function(ev){
            var ev = ev || window.event; //获取event对象

            // this: 指向整个文档document
            // console.log(this);
            this.onmousemove = function(ev){
                var ev = ev || window.event;
                nowX = ev.clientX;
                nowY = ev.clientY;

                minusX = nowX - lastX;
                minusY = nowY - lastY;

                roX -= minusY;
                roY += minusX;

                oWrap.style.transform = "rotateX(" + roX + "deg) rotateY(" + roY + "deg)";

                lastX = nowX;
                lastY = nowY; 

                

            }
            this.onmouseup = function(){
                this.onmousemove = null;
                this.onmouseup = null;
            }
        }
    }
</script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background: #222;
        overflow: hidden;
        user-select: none; /*取消用户选中*/
    }
    .perspective{
        /* 改变该元素的子元素变为透视效果 */
        perspective: 800px;

    }
    .wrap{
        /* 改变维度，必须配合transform属性一同使用 */
        transform-style: preserve-3d;
        width: 135px;
        height: 240px;
        margin:100px auto;
        position: relative;
        transform: rotateX(-10deg) rotateY(0deg);
    }

    .wrap img{
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        transform: rotateY(0deg) translateZ(0px);
        background: transparent;
        box-shadow: 0 0 4px #fff;
        border-radius: 5px;
        /* 修改元素角度弯曲程度 */
        -webkit-box-reflect: below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 100%);
    }

    /* 修饰p标签--照片底座 */
    .wrap p{
        width: 1200px;
        height: 1200px;
        background: -webkit-radial-gradient(center center,600px 600px, rgba(122,122,122,.5),rgba(0,0,0,0));
        position: absolute;
        border-radius: 50%;
        left: 50%;
        top: 100%;
        margin-left: -600px;
        margin-top: -600px;
        /* 沿x轴方向摁倒 */
        transform: rotateX(90deg);
    }
</style>

<body>
    <div class="perspective">
        <div class="wrap">
            <!-- 加载图片 -->
            <img src="img/photo/1.jpg" />
            <img src="img/photo/2.jpg" />
            <img src="img/photo/3.jpg" />
            <img src="img/photo/4.jpg" />
            <img src="img/photo/5.jpg" />
            <img src="img/photo/6.jpg" />
            <img src="img/photo/7.jpg" />
            <img src="img/photo/8.jpg" />
            <img src="img/photo/9.jpg" />
            <img src="img/photo/10.jpg" />
            <img src="img/photo/11.jpg" />
            <p></p>
        </div>
    </div>
</body>
</html>